'use client'
import React, { useEffect, useState } from 'react'
import DataCart from '@/components/DataCart'
import style from './index.module.scss'
import { getHomeTopData, getChartData } from '@/apis'
import { Col, Row } from 'antd'
import VisualChart from '@/components/VisualChart'
import * as echarts from 'echarts';
import Chart from '@/components/Chart'
import LineChart from '@/components/LineChart'


const iconArr = ['icon-fangwufangchan', 'icon-renkou', 'icon-ziyuanxhdpi', 'icon-ziyuanxhdpi', 'icon-ziyuanxhdpi']

export default function AdminIndex() {
  const [topDataList, setTopDataList] = useState([])
  const [chartDataList, setChartDataList] = useState([])
  useEffect(() => {
    ; (async () => {
      const res = await getHomeTopData()
      const res2 = await getChartData()
      // console.log(res)
      setChartDataList(res2.data)
      setTopDataList(res.data.map((item, index) => (
        {
          icon: iconArr[index],
          title: Object.keys(item),
          data: item[Object.keys(item)]
        }
      )))
    })()
  }, [])
  useEffect(() => {
    var housetype = document.getElementById('housetype');
    var housetypeChart = echarts.init(housetype);
    var housetypeOption;
    housetypeOption = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        bottom: '15%',
        left: 'center',
        itemGap: 10, // 减小图例项之间的间距
        itemWidth: 10, // 减小图例框的宽度
        itemHeight: 10, // 减小图例框的高度
        textStyle: {
          fontSize: 12 // 减小字体大小
        }
      },
      series: [
        {
          name: '房屋类别统计',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '38%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'center',
            formatter: '{b}:{d}%'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 10,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: true
          },
          data: chartDataList.decorationTypeChart
        }
      ]
    };
    housetypeOption && housetypeChart.setOption(housetypeOption);
    // var chartDom2 = document.getElementById('main');
    // var myChart2 = echarts.init(chartDom);
    // var option2;
    return () => {
      housetypeChart.dispose()
    }
  }, [chartDataList])
  return (
    <div className={style['admin-container']}>
      <div className={style['datalist']}>
        {topDataList.map((item, index) => <DataCart key={index} obj={item} border={true} color={'#623bfe'} />)}
      </div>
      <Row gutter={16} className={style['row-style']}>
        <Col span={7}>
          <VisualChart title={'房屋类别统计'}>
            <div style={{ height: '100%' }} id='housetype'></div>
          </VisualChart>
        </Col>
        <Col span={10}>
          <VisualChart title={'设备分类'}>
            <LineChart id={'deviceTypeChart'} chartDataList={chartDataList}/>
          </VisualChart>
        </Col>
        <Col span={7}>
          <VisualChart title={'设备状态'}>
            <Chart id={'deviceStatusChart'} chartDataList={chartDataList} />
          </VisualChart>
        </Col>
      </Row>
    </div>
  )
}
